import React, { _, useState,useRef } from 'react'
const Son = (props) => {
    const { list } = props
    return (
        <ul>
            {
                /* map对数组里边的每个元素进行,加工,并且会返回一个新的数组 */
                list.map((item, i) => { return <li key={i} > {item}</li> })
            }
        </ul>
    )
}
// rfce 函數組件
function Test0101() {
    const [list, setList] = useState(['ad', 'ap', 111])
    /* useRef 函数组件来获取dom元素的 */
    const idom = useRef()
    const add = (params) => {
        const ival = idom.current.value;
        list.push(ival)
        // debugger,数组和对象 是传址的,改变里边的数据,ract来说,并不是新额数据
        const nlist =[...list]
        setList(nlist)
    }    
    return (
        <div>
            <input type="text" ref={idom} />
            <button onClick={add} >请点击 {list.length}</button>
            <Son list={list}></Son>
        </div>
    )
}
export default Test0101
